<template>
  <div class="app-container">
    <!-- <div class="d-flex justify-space-between align-center">
      <span>{{ pageType === 'add' ? '新增门店' : '编辑门店' }}</span>
      <el-button type="primary" size="small" plain @click="$router.go(-1)">返回</el-button>
    </div> -->
    <el-form ref="form" :rules="rules" :model="form" label-width="130px">
      <el-form-item label="团队名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入团队名称" />
      </el-form-item>
      <el-form-item label="所属门店：:" prop="shopId">
        <el-select v-model="form.shopId" style="width: 320px" clearable placeholder="请选择" :disabled="pageType !== 'add'">
          <el-option v-for="item in shopList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态：" prop="state">
        <el-select v-model="form.state" style="width: 320px" clearable placeholder="请选择状态">
          <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSave">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addTeam, updateTeam } from "@/api/team/index";
import { getAllShopList } from "@/api/shop/index";
import { mapState } from "vuex";
import { broadcast } from "@/utils/util";
import {GET_TEAM_INFO } from '@/http/public'
export default {
  name: "TeamCreate",
  props: {
    status: {
      type: String,
      default: "add",
    },
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        name: "",
        state: "",
        shopId: "",
        id: "",
      },
      rules: {
        name: [{ required: true, message: "请输入团队名称", trigger: "blur" }],
        state: [{ required: true, message: "请选择状态", trigger: "change" }],
        shopId: [{ required: true, message: "请选择门店", trigger: "change" }],
      },
      stateList: [
        {
          value: 0,
          label: "休息中",
        },
        {
          value: 1,
          label: "奋斗中",
        },
      ],
      shopList: [],
    };
  },
  computed: {
    pageType() {
      return this.status;
    },
    ...mapState("app", ["cityList"]),
  },
  created() {
    this.getAllShopList();
    if (this.pageType !== "add") {
      let m = this.info;
      this.getInfo(m.id);
    }
    console.log(this.$route);
  },
  methods: {
    async getAllShopList() {
      const res = await getAllShopList();
      if (!res.result) return;
      this.shopList = res.data.map((item) => {
        return {
          value: item.id,
          label: item.name,
        };
      });
    },
    async onSave() {
      try {
        await this.$refs["form"].validate();
        this.pageType === "add" ? this.addTeam() : this.updateTeam();
      } catch (error) {}
    },
    async addTeam() {
      const { code } = await addTeam(this.form);
      if (code === 200) {
        this.$message.success("新增门店成功");
        broadcast("close.user.team");
        broadcast("team.add.succes");
      }
    },
    async updateTeam() {
      const { code } = await updateTeam(this.form);
      if (code === 200) {
        this.$message.success("编辑门店成功");
        broadcast("close.user.team");
        broadcast("team.add.succes");
      }
    },

    // 获取团队详情
    getInfo(id) {
      let _this = this;
      GET_TEAM_INFO({ id: id }).then((res) => {
        let obj = res.data || {};
        Object.keys(_this.form).forEach((key) => {
          _this.form[key] = obj[key];
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-input {
  width: 320px;
}
</style>
